<template>
  <div class="container-border">
    <div class="base-css">
      <h2>边框样式</h2>
      <p>对边框进行统一规范，可用于按钮、卡片、弹窗等组件里</p>
      <table class="demo-border">
        <tbody>
          <tr>
            <td class="text">Name</td>
            <td class="text">Thickness</td>
            <td class="line">Demo</td>
          </tr>
          <tr>
            <td class="text">Solid</td>
            <td class="text">1px</td>
            <td class="line">
              <div />
            </td>
          </tr>
          <tr>
            <td class="text">Dashed</td>
            <td class="text">2px</td>
            <td class="line">
              <div class="dashed" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr />
    <div class="base-round">
      <h2>圆角</h2>
      <el-row :gutter="12" class="demo-radius">
        <el-col
          v-for="(radius, i) in radiusGroup"
          :key="i"
          :span="6"
          :xs="{ span: 12 }"
        >
          <div class="title">{{ radius.name }}</div>
          <div class="value">
            <code>border-radius: {{ getValue(radius.type) || "0px" }}</code>
          </div>
          <div
            class="radius"
            :style="{
              borderRadius: radius.type
                ? `var(--el-border-radius-${radius.type})`
                : '',
            }"
          />
        </el-col>
      </el-row>
    </div>
    <hr />
    <div class="base-shodow">
      <h2>阴影</h2>
      <div
        class="flex justify-between items-center flex-wrap"
        style="display: flex"
      >
        <div
          v-for="(shadow, i) in shadowGroup"
          :key="i"
          class="flex flex-col justify-center items-center"
          style="margin: auto"
        >
          <div
            class="inline-flex"
            style="width: 150px; height: 150px"
            m="2"
            :style="{
              boxShadow: `var(${getCssVarName(shadow.type)})`,
            }"
          />
          <span p="y-4" class="demo-shadow-text" text="sm">
            {{ shadow.name }}
          </span>
          <br />
          <code text="xs">
            {{ getCssVarName(shadow.type) }}
          </code>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const radiusGroup = ref([
  {
    name: "No Radius",
    type: "",
  },
  {
    name: "Small Radius",
    type: "small",
  },
  {
    name: "Large Radius",
    type: "base",
  },
  {
    name: "Round Radius",
    type: "round",
  },
]);
const shadowGroup = ref([
  {
    name: "Basic Shadow",
    type: "",
  },
  {
    name: "Light Shadow",
    type: "light",
  },
  {
    name: "Lighter Shadow",
    type: "lighter",
  },
  {
    name: "Dark Shadow",
    type: "dark",
  },
]);

const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? "-" : ""}${type}`;
};
const getValue = (type: string) => {
  const getCssVarValue = (prefix: any, type: any) =>
    getComputedStyle(document.documentElement).getPropertyValue(
      `--el-${prefix}-${type}`
    );
  return getCssVarValue("border-radius", type);
};
</script>
<style scoped>
.container-border {
  padding: 20px;
}
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}

.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>
